
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>海城商城</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/mui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../css/index.css"/>
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script>
    	window.onload=function(){
    		var mian = $(".mui-bar-nav").width();
			var dinwei = $(".dinwei").width();
			var gouwuche = $(".gouwuche").width()+32;
			$(".top_sousuo").width(mian-dinwei-gouwuche);
			$(".mui-scroll-wrapper.mui-slider-indicator").height($(".img_kuang").height()+20)
    	}
    </script>
</head>
<body>
	<!--主体内容-->
	<div class="mui-content">
		<!--  轮播图组件      -->
		<div id="slider" class="mui-slider" >
			<div id="slider_xia" class="mui-slider-group mui-slider-loop">
			    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->  
			</div>
			<div class="mui-slider-indicator">
		    	<div class="mui-indicator mui-active"></div>
		    	<div class="mui-indicator"></div>
		    	<div class="mui-indicator"></div>
		    	<div class="mui-indicator"></div>
			</div>
		</div>
		<!--  四张小图组件  -->
		<div class="gongneng">
			<ul id="gongneng_ulss">
				
			</ul>
		</div>
		<!--  区域滚动组件      -->
		<div class="gundong">
			<!--  模块标题       -->
			<p class="title">
				<i class="iconfont icon-ren-copy"></i>
				机师推荐机油
			</p>
			<div id="scrolsy" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			    <div id="scrolls_x" class="mui-scroll">
			    </div>
			</div>
		</div>
		<div id="remen">
			<p class="title">
				<i class="iconfont icon-gouwudai"></i>
				每日热门
			</p>
			<div id="lianjie1" class="guanggao" data-href="http://www.baidu.com">
				<a class="aas" href="####"><img src="../img/index/gg1.jpg"></a>
			</div>
			<div id="lianjie2" class="guanggao" data-href="http://www.baidu.com">
				<a class="aas" href="####"><img src="../img/index/gg2.jpg"></a>
			</div>
		</div>
		<!--  两个按钮模块      -->
		<div id="btn">
			<ul id="btn_us">
				<a href="####">
					<li class="left tosonpage" data-href="myfinance.html">
						<i class="iconfont icon-meiyuan"></i>
						我的金融
					</li>
				</a>
				<a href="#">
					<li class="right tosonpage" data-href="user_center.html">
						<i class="iconfont icon-huiyuan"></i>
						加入我们
					</li>
				</a>
			</ul>
		</div>
	</div>
    <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/go.js"></script>
    <script type="text/javascript">
    	mui.init({
    		gestureConfig:{
    			swipe: true
    		}
    	});
    	
    	mui.plusReady(function(){
		    var gallery = mui('.mui-slider');
				gallery.slider({
			 		interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
			});
		});
		gotoShopDetail();
		//广告外链跳转
		function gotoShopDetail() {
			var list = document.getElementsByClassName("guanggao");
			var urlid = "";
			for (var i = 0, len = list.length; i < len; i++) {
				list[i].addEventListener("tap", function() {
					urlid = this.getAttribute("data-href");
					mui.openWindow({
						url: "bpage.html",
						id: "bpage.html",
						waiting: {
							autoShow: true
						},
						extras: {
							urlid: urlid
						}
					});
				});
			}
		}
		//底部双链接
		gotosonpage();
		function gotosonpage() {
			var list = document.getElementsByClassName("tosonpage");
			var urlid = "";
			for (var i = 0, len = list.length; i < len; i++) {
				list[i].addEventListener("tap", function() {
					hrefs = this.getAttribute("data-href");
					mui.openWindow({
						url: hrefs,
						id: hrefs,
						waiting: {
							autoShow: false
						},
						extras: {
							urlid: urlid
						}
					});
				});
			}
		}
    	$("#sou").focus(function(){
    		window.location.href='index_sou.html';
    	});
    	
		$.getJSON("../json/index.json",function(data){
			var strHtml = "";//存储数据的变量
//				$jsontip.empty();//清空内容\
			$.each(data[0].scroll,function(infoIndex,info){
				strHtml +='<div id="scroll_xiaji" class="mui-slider-item">';
				strHtml +='<a href="#">';
				strHtml +='<img src=' + info.g_src + '>';
				strHtml +='</a></div>';
			})
			$("#slider_xia").append(strHtml);
			var befores="";
			$.each(data[0].scroll[0],function(infoIndex,info){
				befores +='<div class="mui-slider-item mui-slider-item-duplicate">';
				befores +='<a href="#">';
				befores +='<img src=' + info + '>';
				befores +='</a></div>';
			})
            $("#slider_xia").append(befores);//轮播图
			var afters="";
			$.each(data[0].scroll[0],function(infoIndex,info){
				afters +='<div class="mui-slider-item mui-slider-item-duplicate">';
				afters +='<a href="#">';
				afters +='<img src=' + info + '>';
				afters +='</a></div>';
			})
			$("#scroll_xiaji").before(befores);
		});
		
        $.ajax({
            url:'http://www.reliants.cn/Mobile/index/indexFeilei',
            type:'get',
            async:true,
            dataType:'html',
            success:function(data){
                var a4 = $('<a id="gengduo" data-href="quanbu.html"><li><img src="../img/index/gn4.jpg"><p>更多</p></li></a>')
                $("#gongneng_ulss").html(data);
                $(a4).appendTo("#gongneng_ulss");
                var fenlei_img = document.getElementById('gongneng_ulss').getElementsByTagName('li');
                for(var i=0;i<fenlei_img.length;i++){
                    (function(x){
                        fenlei_img[x].addEventListener('tap',function(){
							if(x<3){
								var product_id = this.getElementsByTagName('p')[0].getAttribute('data-id');						
								mui.openWindow({
									url:"changpinlist.html",
									id:"changpinlist.html",
									waiting: {
										autoShow: false
									},
									extras: {
										urlid:product_id
									}
								})
							}else{
								mui.openWindow({
									url:"quanbu.html",
									id:"quanbu.html",
									waiting: {
										autoShow: false
									},
									extras: {
										urlid:product_id,
										title:"更多"
									}
								})
							}
                        });
                        
                    })(i)
                }
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
//              alert(errorThrown)
            },
        })
        
        //机师推荐机油
        $.ajax({
            url:'http://www.reliants.cn/mobile/index',
            type:'get',
            async:true,
            dataType:'json',
            success:function(data){
                var $jsontip = $("#scrolls_x");
                var strHtml = "";
                $jsontip.empty();
                $.each(data,function(infoIndex,info){
                    strHtml +='<a data_id='+info.id+' class="mui-control-item chanpin">';
                    strHtml +='<div class="img_kuang">';
                    strHtml +='<img src=' + info.s_src + '>';
                    strHtml +='<p class="name">' + info.s_p1 + '</p>';
                    strHtml +='<p class="jiage">';
                    strHtml +=info.s_p2;
                    strHtml +='<span>'+ info.s_span +'</span>';
                    strHtml +='</p>';
                    strHtml +='<p class="denglu">'+ info.s_p3 +'</p>';
                    strHtml +='</div>';
                    strHtml +='</a>';
                })
                $("#scrolls_x").html(strHtml);
                $("#scrolls_x").eq(-1).addClass("as5");
                scrolls_x();
                function scrolls_x(){
                    var nav = document.getElementById("scrolls_x");
                    var nav_tab = nav.getElementsByClassName("mui-control-item");
                    for(var i=0;i<nav_tab.length;i++){
                        (function(x){
                            nav_tab[x].addEventListener('tap',function(){
                                var product_id = $(this).attr('data_id')
								mui.openWindow({
									url:"changpinxiangqing.html",
									id:"changpinxiangqing.html",
									waiting: {
										autoShow: false
									},
									extras: {
										urlid:product_id
									}
								})
                            });
                        })(i)
                    }
                }
            },
            error:function(error){

            },
        })
        mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			scrollX: false,
			bounce: true,
			scrollY: true,
			startX: 200
		});
    </script>

</body>
</html>


